<!DOCTYPE html>
<html lang="en">
<head>
	<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

	<link rel="stylesheet" href="./css/register.css">
	<link rel="stylesheet" type="text/css" href="css/verify.css">

	<title>会员注册</title>
</head>
<body>
	<section id="register">
		<div class="text-center">
			<img src="./images/logo.png" alt="" width="140" height="140">
	      	<h1 class="h3 mb-3 font-weight-normal">会员注册</h1>
			<div class="container text-center text-danger">
				<div class="row mt-3">
			  		<div class="col-md-2 offset-md-2"><h6>第一步：注册信息</h6></div>
			  		<div class="col-md-2"><h6>第二步：签订协议</h6></div>
			  		<div class="col-md-2"><h6>第三步：验证通过</h6></div>
			  		<div class="col-md-2"><h6>第四步：完成注册</h6></div>
			  	</div>
				<div class="row">
					<div class="progress col-md-8 offset-md-2">
			  			<div id="progress" class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 25%">
			  			</div>
					</div>
				</div>
		
			</div>

		</div>
			<section id="register_step_one">
				<!-- 设置表单内所有文字为白色，并且该表单为needs-validation -->
				<form class="needs-validation py-4 text-muted" novalidate="">
					<div class="container">
						<div class="row">
							<div class="col-md-4 offset-md-2">
								<div class="mb-3 form-group row">
			                		<label for="userName" class="col-sm-4 col-form-label">用户名：</label>
			                		<div class="col-sm-8">
			                			<input type="text" class="form-control" name="userName" id="userName" placeholder="your userName" value="" required="">
			                		</div>
			                		<!-- 输入判空提示 -->
				                	<div class="invalid-feedback">
				                  		用户名不能为空.
				                	</div>
			                	</div>

								<div class="mb-3 form-group row">
									<label for="password" class="col-sm-4 col-form-label">登录密码：</label>
									<div class="col-sm-8">
						            	<input type="password" class="form-control" id="password" name="password" placeholder="your password" required="">
						        	</div>
						            <!-- 输入判空提示 -->
						            <div class="invalid-feedback">
						                密码不能为空.
						            </div>
					        	</div>

								<div class="mb-3 form-group row">
						            <label for="comfirmPassword" class="col-sm-4 col-form-label">确认密码：</label>
						            <div class="col-sm-8">
						            	<input type="passwordF" class="form-control" id="comfirmPassword" placeholder="conmfrim password" required="">
						        	</div>
						            <!-- 输入判空提示 -->
						            <div class="invalid-feedback">
						                密码不能为空.
						            </div>
					        	</div>

		          				<div class="mb-3 form-group row">
					              	<label for="email" class="col-sm-4 col-form-label">E-mail：</label>
					              	<div class="col-sm-8">
					              		<input type="email" class="form-control" id="email" name="email" placeholder="you@example.com" required="">
					              	</div>
					              	<!-- 输入判空提示 -->
					              	<div class="invalid-feedback">
					                		请输入正确的邮箱地址.
					              	</div>
		            			</div>
		            		</div><!-- /.row -->
							
							<div class="col-md-4">
								<div class="mb-3 form-group row">
			                		<label for="userRealName" class="col-sm-4 col-form-label">姓名：</label>
			                		<div class="col-sm-8">
			                			<input type="text" class="form-control" id="userRealName" name="userRealName" placeholder="your Name" value="" required="">
			                		</div>
			                		<!-- 输入判空提示 -->
								    <div class="invalid-feedback">
								        姓名不能为空.
								    </div>
								</div>
								<div class="mb-3 form-group row">
			                		<label for="Sex" class="col-sm-4 col-form-label">性别：</label>
			                		<div class="col-sm-8 mt-2">
			                			<div class="form-check form-check-inline">
								  			<input class="form-check-input" type="radio" name="sex" value="M">
								  			<label class="form-check-label" for="inlineRadio1">男</label>
										</div>
										<div class="form-check form-check-inline ml-5">
										  	<input class="form-check-input" type="radio" name="sex" value="F">
										  	<label class="form-check-label" for="inlineRadio2">女</label>
										</div>
			                		</div>
								</div>
								<div class="mb-3 form-group row">
			                		<label for="brith" class="col-sm-4 col-form-label">生日：</label>
			                		<div class="col-sm-8">
			                			<input type="date" style="display: inline-block;" id="brith" name="brith" class="form-control">
			                		</div>
								</div>
							</div>
	            			</div><!-- /.col-md-4.offset-md-4 -->
            			</div><!-- /.row -->
            		</div><!-- /.container -->
          		</form>
          		<div class="col-md-8 offset-md-2">
		         	<hr class="mb-4">
					<button id="btn_step_one" class="btn btn-primary btn-lg btn-block">	Continue to register</button>
		        </div>
			</section>
			<section id="register_step_two" style="display: none;">
				<div class="container text-center">
					<h4 class="my-4 text-muted">注册协议</h4>
					<div class="row">
					<div class="agreement col-md-6 offset-md-3" style="height: 300px;">
						<p>尊敬的用户欢迎您注册成为本网站会员。请用户仔细阅读以下全部内容。如用户不同意本服务条款任意内容，请不要注册或使用本网站服务。如用户通过本网站注册程序，即表示用户与本网站已达成协议，自愿接受本服务条款的所有内容。此后，用户不得以未阅读本服务条款内容作任何形式的抗辩。</p> <p>一、本站服务条款的确认和接纳<br>本网站涉及的各项服务的所有权和运作权归本网站所有。本网站所提供的服务必须按照其发布的服务条款和操作规则严格执行。本服务条款的效力范围及于本网站的一切产品和服务，用户在享受本网站的任何服务时，应当受本服务条款的约束。</p> <p>二、服务简介<br>本网站运用自己的操作系统通过国际互联网络为用户提供各项服务。用户必须:  1. 提供设备，如个人电脑、手机或其他上网设备。 2. 个人上网和支付与此服务有关的费用。</p> <p>三、用户在不得在本网站上发布下列违法信息<br>1. 反对宪法所确定的基本原则的； 2. 危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的； 3. 损害国家荣誉和利益的； 4. 煽动民族仇恨、民族歧视，破坏民族团结的； 5. 破坏国家宗教政策，宣扬邪教和封建迷信的； 6. 散布谣言，扰乱社会秩序，破坏社会稳定的； 7. 散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的； 8. 侮辱或者诽谤他人，侵害他人合法权益的； 9. 含有法律、行政法规禁止的其他内容的。</p> <p>四、有关个人资料<br>用户同意:  1. 提供及时、详尽及准确的个人资料。 2. 同意接收来自本网站的信息。 3. 不断更新注册资料，符合及时、详尽准确的要求。所有原始键入的资料将引用为注册资料。 4. 本网站不公开用户的姓名、地址、电子邮箱和笔名。除以下情况外:  a) 用户授权本站透露这些信息。 b) 相应的法律及程序要求本站提供用户的个人资料。</p> <p>五、服务条款的修改<br>本网站有权在必要时修改服务条款，一旦条款及服务内容产生变动，本网站将会在重要页面上提示修改内容。如果不同意所改动的内容，用户可以主动取消获得的本网站信息服务。如果用户继续享用本网站信息服务，则视为接受服务条款的变动。</p> <p>六、用户隐私制度<br>尊重用户个人隐私是本网站的一项基本政策。所以，本网站一定不会在未经合法用户授权时公开、编辑或透露其注册资料及保存在本网站中的非公开内容，除非有法律许可要求或本网站在诚信的基础上认为透露这些信息在以下四种情况是必要的:  1. 遵守有关法律规定，遵从本网站合法服务程序。 2. 保持维护本网站的商标所有权。 3. 在紧急情况下竭力维护用户个人和社会大众的隐私安全。 4. 符合其他相关的要求。</p> <p>七、用户的帐号、密码和安全性<br>用户一旦注册成功，将获得一个密码和用户名。用户需谨慎合理的保存、使用用户名和密码。如果你不保管好自己的帐号和密码安全，将负全部责任。另外，每个用户都要对其帐户中的所有活动和事件负全责。你可随时根据指示改变你的密码。用户若发现任何非法使用用户帐号或存在安全漏洞的情况，请立即通告本网站。   八、 拒绝提供担保 用户明确同意信息服务的使用由用户个人承担风险。本网站不担保服务不会受中断，对服务的及时性，安全性，出错发生都不作担保，但会在能力范围内，避免出错。</p> <p>九、有限责任<br>如因不可抗力或其它本站无法控制的原因使本站销售系统崩溃或无法正常使用导致网上交易无法完成或丢失有关的信息、记录等本站会尽可能合理地协助处理善后事宜，并努力使客户免受经济损失，同时会尽量避免这种损害的发生。</p> <p>十、用户信息的储存和限制<br>本站有判定用户的行为是否符合国家法律法规规定及本站服务条款权利，如果用户违背本网站服务条款的规定，本网站有权中断对其提供服务的权利。</p> <p>十一、用户管理<br>用户单独承担发布内容的责任。用户对服务的使用是根据所有适用于本站的国家法律、地方法律和国际法律标准的。用户必须遵循:  1. 使用网络服务不作非法用途。 2. 不干扰或混乱网络服务。 3. 遵守所有使用网络服务的网络协议、规定、程序和惯例。 用户须承诺不传输任何非法的、骚扰性的、中伤他人的、辱骂性的、恐性的、伤害性的、庸俗的，淫秽等信息资料。另外，用户也不能传输何教唆他人构成犯罪行为的资料；不能传输助长国内不利条件和涉及国家安全的资料；不能传输任何不符合当地法规、国家法律和国际法律的资料。未经许可而非法进入其它电脑系统是禁止的。 若用户的行为不符合以上提到的服务条款，本站将作出独立判断立即取消用户服务帐号。用户需对自己在网上的行为承担法律责任。用户若在本站上散布和传播反动、色情或其它违反国家法律的信息，本站的系统记录有可能作为用户违反法律的证据。</p> <p>十二、通告<br>所有发给用户的通告都可通过重要页面的公告或电子邮件或常规的信件传送。服务条款的修改、服务变更、或其它重要事件的通告都会以此形式进行。</p> <p>十三、信息内容的所有权<br>本网站定义的信息内容包括: 文字、软件、声音、相片、录象、图表；在广告中全部内容；本网站为用户提供的其它信息。所有这些内容受版权、商标、标签和其它财产所有权法律的保护。所以，用户只能在本网站和广告商授权下才能使用这些内容，而不能擅自复制、再造这些内容、或创造与内容有关的派生产品。本站所有的文章版权归原文作者和本站共同所有，任何人需要转载本站的文章，必须征得原文作者或本站授权。</p> <p>十四、法律<br>本协议的订立、执行和解释及争议的解决均应适用中华人民共和国的法律。用户和本网站一致同意服从本网站所在地有管辖权的法院管辖。如发生本网站服务条款与中华人民共和国法律相抵触时，则这些条款将完全按法律规定重新解释，而其它条款则依旧保持对用户的约束力。</p>
					</div>
						<div class="col-md-6 offset-md-3 mt-2">
			                <div class="form-check form-check-inline">
								<input class="form-check-input" type="radio" name="Choose" value="Y">
								<label class="form-check-label" for="inlineRadio1">我同意该项协议</label>
							</div>
							<div class="form-check form-check-inline ml-5">
								<input class="form-check-input" type="radio" name="Choose" value="N">
								<label class="form-check-label" for="inlineRadio2">我不同意该项协议</label>
							</div>
			            </div>
					</div>
				</div>
				<div class="col-md-8 offset-md-2 mb-5">
		         	<hr class="mb-4">
					<button id="btn_step_two" class="btn btn-primary btn-lg btn-block">	Continue to register</button>
		        </div>
			</section>
			<section id="register_step_three" style="display: none;">
				<div class="container text-center">
					<h4 class="mt-4 text-muted">请拖动以下拼图完成验证</h4>
					<div class="row">
						<div id="myVerify" class="col-md-6 offset-md-3 mt-5">
        				</div>
					</div>
				</div>
			</section>
			<section id="register_step_four" style="display: none;">
				<div class="container">
					<div class="row">
						<div id="message" class="col-md-8 offset-md-2 alert alert-success my-5" role="alert">
						  	<h4 class="alert-heading">恭喜您，注册成功!</h4>
						  	<hr>
						  	<p class="mb-3"></p>
						</div>
					</div>
				</div>
			</section>
	</section>
	<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/verify.min.js" ></script>
    <script type="text/javascript">
		$(document).ready(function() {

			$('#myVerify').slideVerify({
		    	type : 2,		//类型
        		vOffset : 5,	//误差量，根据需求自行调整
		        vSpace : 5,	//间隔
		        imgName : ['7.jpg', '8.jpg'],
		        imgSize : {
		        	width: '540px',
		        	height: '200px',
		        },
		        blockSize : {
		        	width: '40px',
		        	height: '40px',
		        },
		        barSize : {
		        	width : '540px',
		        	height : '40px',
		        },
		        ready : function() {
		    	},
		        success : function() {
		        	$("#register_step_three").hide();
		        	$("#progress").width("100%");
		        	$("#register_step_four").show();
					$.register();
		        },
		        error : function() {
		        	alert('验证失败！请重新尝试！');
		        }
		        
		    });

			$("#btn_step_one").click(function(){
				$("#register_step_one").hide();
				$("#progress").width("50%");
				$("#register_step_two").show();
			});

			$("#btn_step_two").click(function(){
				if ($("input[name='Choose']").is(':checked')) {
					if ($("input[name='Choose']:checked").val() == 'Y') {
						$("#register_step_two").hide();
						$("#progress").width("75%");
						$("#register_step_three").show();
					} else {
						alert('您未同意注册协议，注册失败');
					}
				} else {
					alert('请勾选注册协议！');
				}
			});
			
			$.register = function() {
				var params = $("#register").find("input").serializeArray();
				var data = jQuery.param(params);
				$.ajax({
                    type: "post",
                    async: false,
                    url: "/eshop-project/user/saveUser?" + data,
                    success: function (data) {
 						$('#message h4').text("恭喜您，注册成功!");
 						$('#message p').text("您已成功在本网站注册您的账户信息，我们将会保证您的消费者权益！让您在本网站消费安心，便利！")
 						$('#message p').after('<a class="btn btn-success btn-block" href="user_login.html">登录<a>');
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                    	$('#message h4').text("非常遗憾，注册失败!");
 						$('#message p').after('<button class="btn btn-danger btn-block" href="register.html">重新注册</button>');
                    },
                })
			}

		});
	</script>
</body>
</html>